/**
 * 项目详情模态框组件
 */

'use client';

import React, { useState } from 'react';
import {
  Modal,
  Descriptions,
  Table,
  Tabs,
  Card,
  Statistic,
  Row,
  Col,
  Tag,
  Progress,
  Button,
  Space,
  Typography,
  Divider,
  Avatar,
  List,
  Empty
} from 'antd';
import {
  UserOutlined,
  ClockCircleOutlined,
  CalendarOutlined,
  BarChartOutlined,
  ExportOutlined,
  TeamOutlined
} from '@ant-design/icons';
import { ProjectWorkloadSummary, WorkloadRecord } from '@/types/workload';
import { formatDuration, formatDate } from '@/utils/dateUtils';

const { Title, Text } = Typography;
const { TabPane } = Tabs;

interface ProjectDetailModalProps {
  visible: boolean;
  onClose: () => void;
  projectSummary: ProjectWorkloadSummary | null;
  workloadDetails: WorkloadRecord[];
  loading?: boolean;
}

export default function ProjectDetailModal({
  visible,
  onClose,
  projectSummary,
  workloadDetails,
  loading = false
}: ProjectDetailModalProps) {
  const [activeTab, setActiveTab] = useState('overview');

  if (!projectSummary) {
    return null;
  }

  // 成员工时统计表格列定义
  const memberColumns = [
    {
      title: '成员',
      dataIndex: 'memberName',
      key: 'memberName',
      render: (name: string, record: any) => (
        <Space>
          <Avatar size="small" icon={<UserOutlined />} />
          <span>{name}</span>
        </Space>
      ),
    },
    {
      title: '总工时',
      dataIndex: 'totalHours',
      key: 'totalHours',
      render: (hours: number) => formatDuration(hours),
      sorter: (a: any, b: any) => a.totalHours - b.totalHours,
    },
    {
      title: '工作日数',
      dataIndex: 'workDays',
      key: 'workDays',
      render: (days: number) => `${days} 天`,
    },
    {
      title: '平均日工时',
      dataIndex: 'avgDailyHours',
      key: 'avgDailyHours',
      render: (hours: number) => `${hours.toFixed(1)}h`,
    },
    {
      title: '占比',
      dataIndex: 'percentage',
      key: 'percentage',
      render: (percentage: number) => (
        <Progress
          percent={percentage}
          size="small"
          format={(percent) => `${percent?.toFixed(1)}%`}
        />
      ),
    },
  ];

  // 工时记录表格列定义
  const workloadColumns = [
    {
      title: '日期',
      dataIndex: 'date',
      key: 'date',
      render: (date: string) => formatDate(date),
      sorter: (a: WorkloadRecord, b: WorkloadRecord) => 
        new Date(a.date).getTime() - new Date(b.date).getTime(),
    },
    {
      title: '成员',
      dataIndex: 'memberName',
      key: 'memberName',
      render: (name: string) => (
        <Space>
          <Avatar size="small" icon={<UserOutlined />} />
          <span>{name}</span>
        </Space>
      ),
    },
    {
      title: '工时类型',
      dataIndex: 'workloadTypeName',
      key: 'workloadTypeName',
      render: (type: string) => <Tag color="blue">{type}</Tag>,
    },
    {
      title: '工时',
      dataIndex: 'hours',
      key: 'hours',
      render: (hours: number) => formatDuration(hours),
      sorter: (a: WorkloadRecord, b: WorkloadRecord) => a.hours - b.hours,
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
      ellipsis: true,
    },
  ];

  // 导出项目详情数据
  const handleExportDetail = () => {
    // 这里可以实现导出功能
    console.log('导出项目详情数据');
  };

  return (
    <Modal
      title={
        <Space>
          <BarChartOutlined />
          <span>{projectSummary.projectName} - 工时详情</span>
        </Space>
      }
      open={visible}
      onCancel={onClose}
      width={1200}
      footer={[
        <Button key="export" icon={<ExportOutlined />} onClick={handleExportDetail}>
          导出详情
        </Button>,
        <Button key="close" onClick={onClose}>
          关闭
        </Button>,
      ]}
    >
      <Tabs activeKey={activeTab} onChange={setActiveTab}>
        <TabPane tab="项目概览" key="overview">
          <Row gutter={[16, 16]}>
            <Col span={6}>
              <Card>
                <Statistic
                  title="总工时"
                  value={projectSummary.totalHours}
                  formatter={(value) => formatDuration(Number(value))}
                  prefix={<ClockCircleOutlined />}
                />
              </Card>
            </Col>
            <Col span={6}>
              <Card>
                <Statistic
                  title="参与成员"
                  value={projectSummary.memberCount}
                  suffix="人"
                  prefix={<TeamOutlined />}
                />
              </Card>
            </Col>
            <Col span={6}>
              <Card>
                <Statistic
                  title="工作日数"
                  value={projectSummary.workDays}
                  suffix="天"
                  prefix={<CalendarOutlined />}
                />
              </Card>
            </Col>
            <Col span={6}>
              <Card>
                <Statistic
                  title="平均日工时"
                  value={projectSummary.avgDailyHours}
                  precision={1}
                  suffix="h"
                />
              </Card>
            </Col>
          </Row>

          <Divider />

          <Descriptions title="项目信息" bordered column={2}>
            <Descriptions.Item label="项目名称">
              {projectSummary.projectName}
            </Descriptions.Item>
            <Descriptions.Item label="项目标识">
              {projectSummary.projectIdentifier}
            </Descriptions.Item>
            <Descriptions.Item label="开始日期">
              {formatDate(projectSummary.startDate)}
            </Descriptions.Item>
            <Descriptions.Item label="结束日期">
              {formatDate(projectSummary.endDate)}
            </Descriptions.Item>
            <Descriptions.Item label="工时类型" span={2}>
              <Space wrap>
                {projectSummary.workloadTypes.map((type, index) => (
                  <Tag key={index} color="blue">
                    {type}
                  </Tag>
                ))}
              </Space>
            </Descriptions.Item>
          </Descriptions>
        </TabPane>

        <TabPane tab="成员统计" key="members">
          <Card title="成员工时分布">
            <Table
              columns={memberColumns}
              dataSource={projectSummary.memberStats}
              rowKey="memberId"
              loading={loading}
              pagination={{
                pageSize: 10,
                showSizeChanger: true,
                showQuickJumper: true,
                showTotal: (total) => `共 ${total} 名成员`,
              }}
            />
          </Card>
        </TabPane>

        <TabPane tab="工时记录" key="records">
          <Card title="详细工时记录">
            <Table
              columns={workloadColumns}
              dataSource={workloadDetails}
              rowKey={(record) => `${record.id}-${record.date}-${record.memberId}`}
              loading={loading}
              pagination={{
                pageSize: 20,
                showSizeChanger: true,
                showQuickJumper: true,
                showTotal: (total) => `共 ${total} 条记录`,
              }}
              scroll={{ x: 800 }}
            />
          </Card>
        </TabPane>
      </Tabs>
    </Modal>
  );
}